<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./static/js/echarts.min.js"></script>

    <script src="./static/js/jquery-1.11.1.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    var row=[];
    var g_group_ary = new Array();
    var g_group_time_ary = new Array();

    function getusers() {//每个组的数据
        $.ajax({
            type: "get",
            url: "g_total.php",
            async: false,
            data: {},
            dataType: "json",
            success: function(result){
                var res = result.res;
                var i = 0;
                //构造组名（一维数组）
                for(var _group in res)
                {
                    g_group_ary[i] = _group;
                    //console.log(_group);
                    g_group_time_ary[i] = new Array();
                    i = i + 1;
                }
                //构造每组的具体统计数据（二维数组）
                var i = 0;
                for(var _group in res)
                {
                    var j = 0;
                    for(var _group_time in res[_group])
                    {
                        g_group_time_ary[i][j] = res[_group][_group_time];
                        j = j + 1;
                    }
                    i = i + 1;
                }
            },
            error: function(errmsg) {
                alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
    }
    function getusers1() {//制作时间条
        $.ajax({
            type: "get",
            url: "row_total.php",
            async: false,
            data: {},
            dataType: "json",
            success: function(result){
                //console.log(result)
                if(result){
                    //console.log("error");
                    for(var i = 0 ; i < result.length; i++){
                        row.push(result[i]);
                    }
                    //title.push(result[i].title);
                }
            },
            error: function(errmsg) {
                alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
       // console.log(name);
        return row;
    }
    getusers();
    getusers1();
    var a=1;

    function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function() {
            cb({
            });
        }, 1000);
    }
   // var aa={"进群人数","图片分享数","分享率"};
  /*  var arr = new Array();
    arr[0] = '进群人数';
    arr[1] = '图片分享数';
    arr[2] = '分享率';*/
 //   var data = [[1,2,4],[2,4,7],[8,9,10],[9,12,13]];
    var serie = [];
    function functionName(){

        for(var i = 0; i <g_group_ary.length; i++){
            var item = {
                name: g_group_ary[i],
                type: 'line',
                data: g_group_time_ary[i]
            }
            serie.push(item);
        };
        return serie;
    }
    functionName();
    //  myChart.showLoading();
    fetchData(function(data) {
        //     myChart.hideLoading();
        myChart.setOption({
            title: {
                text: '个群增长趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:'{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C23531"></span>进群人数: {c0}<br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2F4554"></span>开始时间: <br/>' +
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#9CC4C9"></span>结束时间: <br/>'
            },
            legend: {
                data: g_group_ary,
                align: 'right',
                right: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: row
            }],
            yAxis: [{
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            "dataZoom": [
                {
                    "show": true,
                    "height": 30,
                    "xAxisIndex": [
                        0
                    ],
                    bottom:0,
                    "start": 0,
                    "end": 80
                },
                {
                    "type": "inside",
                    "show": true,
                    "height": 15,
                    "xAxisIndex": [
                        0
                    ],
                    "start": 1,
                    "end": 35
                }
            ],
            series:serie
        });
    });
   // myChart.setOption(option);
</script>
</body>

</html>